<template>
	<div class="home-container">
		<!-- 标题区域 -->
		<div class="title-section">
			<div class="title-icon">
				<svg
					t="1741695185117"
					class="icon"
					viewBox="0 0 1024 1024"
					version="1.1"
					xmlns="http://www.w3.org/2000/svg"
					p-id="9354"
					width="96"
					height="96"
				>
					<path
						d="M177.152 665.088c-10.24 0-16.896-8.192-16.896-16.896 0-10.24 8.192-16.896 16.896-16.896h79.872c10.24 0 16.896 8.192 16.896 16.896 0 10.24-8.192 16.896-16.896 16.896H177.152z m0-53.76c-10.24 0-16.896-8.192-16.896-16.896 0-10.24 8.192-16.896 16.896-16.896h79.872c10.24 0 16.896 8.192 16.896 16.896 0 10.24-8.192 16.896-16.896 16.896H177.152z m335.36-39.936c-48.128 0-88.576-39.936-88.576-88.576 0-48.128 39.936-88.576 88.576-88.576 48.128 0 88.576 39.936 88.576 88.576s-40.448 88.576-88.576 88.576z m0-136.704c-25.088 0-46.592 21.504-46.592 46.592 0 25.088 21.504 46.592 46.592 46.592 25.088 0 46.592-21.504 46.592-46.592 0-25.088-21.504-46.592-46.592-46.592zM177.152 558.08c-10.24 0-16.896-8.192-16.896-16.896 0-10.24 8.192-16.896 16.896-16.896h79.872c10.24 0 16.896 8.192 16.896 16.896 0 10.24-8.192 16.896-16.896 16.896H177.152z m588.8 107.008c-10.24 0-16.896-8.192-16.896-16.896 0-10.24 8.192-16.896 16.896-16.896h79.872c10.24 0 16.896 8.192 16.896 16.896 0 10.24-8.192 16.896-16.896 16.896h-79.872z m0-53.76c-10.24 0-16.896-8.192-16.896-16.896 0-10.24 8.192-16.896 16.896-16.896h79.872c10.24 0 16.896 8.192 16.896 16.896 0 10.24-8.192 16.896-16.896 16.896h-79.872z m0-53.248c-10.24 0-16.896-8.192-16.896-16.896 0-10.24 8.192-16.896 16.896-16.896h79.872c10.24 0 16.896 8.192 16.896 16.896 0 10.24-8.192 16.896-16.896 16.896h-79.872z m0 0"
						fill="#88CCFF"
						p-id="9355"
					></path>
					<path
						d="M944.64 855.552h-11.776V441.344c0-12.8-10.24-23.04-23.04-23.04h-180.224V357.888c0-7.68-4.608-15.872-11.264-18.944l-1.024-0.512-188.416-116.224v-29.184h112.128c8.704 0 17.92-6.656 17.92-17.92V104.448c0-8.704-6.656-17.92-17.92-17.92h-112.128v-13.824c0-9.728-7.68-17.92-16.384-17.92-9.728 0-17.92 7.68-17.92 16.384v147.456L306.176 334.848c-4.096 3.072-11.776 9.216-11.776 19.456V414.72H117.248c-12.8 0-23.04 10.24-23.04 23.04V855.04h-13.824c-12.8 0-24.576 12.288-24.576 24.576s10.24 23.04 23.04 23.04h99.84c12.8 0 23.04-10.24 23.04-23.04s-10.24-23.04-23.04-23.04h-38.4V504.832c0-22.016 17.92-40.448 40.448-40.448h76.8c22.016 0 40.448 17.92 40.448 40.448v438.784c0 6.144 2.56 12.8 6.144 15.36l1.024 1.024c4.608 4.608 10.24 7.168 15.872 7.168h123.392c14.336 0 24.576-10.24 24.576-24.576v-230.4c0-14.848 12.288-27.136 27.136-27.136h33.28c14.848 0 27.136 12.288 27.136 27.136v225.28c0 17.408 13.824 31.232 31.232 31.232h118.272c12.8 0 23.04-10.24 23.04-23.04V507.904c0-24.064 19.456-43.52 43.52-43.52h68.608c24.064 0 43.52 19.456 43.52 43.52V855.04h-40.448c-12.8 0-23.04 10.24-23.04 23.04s10.24 23.04 23.04 23.04h99.84c12.8 0 23.04-10.24 23.04-23.04v-1.024c0.512-4.608-1.536-9.728-5.12-13.824-4.608-4.608-11.264-7.68-17.408-7.68zM530.432 112.64h95.744v55.296h-95.744V112.64z m151.04 769.024c0 20.992-18.432 38.4-40.448 38.4-22.016 0-40.448-17.92-40.448-40.448v-208.384c0-12.8-10.24-23.04-23.04-23.04H447.488c-12.8 0-23.04 10.24-23.04 23.04v208.384c0 22.016-17.92 40.448-40.448 40.448s-40.448-17.92-40.448-40.448V406.528c0-21.504 11.776-43.52 34.56-59.264 11.776-9.728 24.064-15.36 37.44-15.36h295.936c13.568 0 25.6 5.12 35.52 15.36 22.784 15.744 34.56 37.76 34.56 59.264v475.136z"
						fill="#1144FB"
						p-id="9356"
					></path>
				</svg>
			</div>
			<div class="title-content">
				<h1>{{ state.title.name }}</h1>
				<p class="description">{{ state.title.desp }}</p>
				<div class="meta-info">
					<div class="tags">
						<el-tag
							v-for="(tag, index) in state.title.tags"
							:key="index"
							:type="tag === 'VIP' ? 'danger' : tag === 'Java' ? '' : 'info'"
							size="small"
							effect="dark"
						>
							{{ tag }}
						</el-tag>
					</div>
					<div class="stats">
						<span class="stat-item">
							<el-icon><User /></el-icon>
							{{ state.title.num }}人阅读
						</span>
						<span class="stat-item">
							<el-icon><Clock /></el-icon>
							{{ state.title.time }}
						</span>
					</div>
				</div>
				<div class="actions">
					<el-button type="primary" @click="handleCollect" round>
						<el-icon><Star /></el-icon>
						收藏
					</el-button>
					<el-button type="success" @click="handleShare" round>
						<el-icon><Share /></el-icon>
						分享
					</el-button>
					<el-button type="info" round>
						<el-icon><View /></el-icon>
						阅读人数: {{ state.title.num }}
					</el-button>
				</div>
			</div>
		</div>

		<!-- 答案区域 -->
		<div class="answer-section">
			<el-card shadow="hover">
				<template #header>
					<div class="answer-header">
						<h2>详细答案</h2>
						<el-button type="text" @click="copyAnswer">复制答案</el-button>
					</div>
				</template>
				<div class="answer-content">
					<div v-for="(section, index) in state.answerContent" :key="index" class="answer-section-item">
						<h3 v-if="section.title">{{ section.title }}</h3>
						<p>{{ section.content }}</p>
						<div v-if="section.code" class="code-block">
							<pre><code>{{ section.code }}</code></pre>
						</div>
					</div>
				</div>
			</el-card>
		</div>
		<!-- 评论区域 -->
		<div class="comments-section">
			<el-button type="primary" @click="toggleComments" round class="toggle-comments-btn">
				{{ showComments ? '隐藏评论' : '显示评论' }}
			</el-button>
			<div v-if="showComments" class="comments-container">
				<!-- 评论发布表单 -->
				<el-card shadow="hover" class="comment-form">
					<h3>发表评论</h3>
					<el-input v-model="newComment" type="textarea" :rows="3" placeholder="写下你的评论..." maxlength="500" show-word-limit />
					<div class="form-actions">
						<el-button type="primary" @click="submitComment" :disabled="!newComment.trim()"> 发布评论 </el-button>
					</div>
				</el-card>

				<!-- 评论列表 -->
				<div class="comment-list">
					<h3>全部评论 ({{ state.comments.length }})</h3>

					<div v-if="state.comments.length === 0" class="empty-comments">
						<el-empty description="暂无评论，快来发表你的看法吧~" />
					</div>

					<el-card v-for="(comment, index) in state.comments" :key="index" shadow="hover" class="comment-item">
						<div class="comment-header">
							<div class="user-info">
								<el-avatar :size="40" :src="comment.avatar" />
								<div class="user-meta">
									<span class="username">{{ comment.username }}</span>
									<span class="time">{{ comment.time }}</span>
								</div>
							</div>
							<el-tag v-if="comment.isAuthor" type="success" size="small">作者</el-tag>
						</div>
						<div class="comment-content">
							{{ comment.content }}
						</div>
						<div class="comment-actions">
							<el-button type="text" @click="likeComment(index)">
								<el-icon><Thumb /></el-icon>
								{{ comment.likes }} 赞
							</el-button>
							<el-button type="text" @click="replyToComment(index)">
								<el-icon><ChatDotRound /></el-icon>
								回复
							</el-button>
						</div>
					</el-card>
				</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { reactive,ref } from 'vue';
import { Star, Share, View, User, Clock } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';

const state = reactive({
	title: {
		name: '说说 Java 中 HashMap 的原理？',
		desp: '深入解析 HashMap 的工作原理、实现机制及性能特点',
		tags: ['VIP', 'Java', '集合框架'],
		num: 2000,
		time: '2025-03-31',
	},
	answerContent: [
		{
			title: '1. HashMap 基本结构',
			content:
				'HashMap 是 Java 集合框架中基于哈希表的 Map 接口实现，它存储键值对(key-value)映射。HashMap 使用数组+链表+红黑树(JDK1.8+)的结构实现，主要包含以下几个重要属性：',
		},
		{
			content:
				'- table: Node<K,V>[] 数组，HashMap 的底层存储结构\n- size: 当前存储的键值对数量\n- threshold: 扩容阈值，等于 capacity * loadFactor\n- loadFactor: 负载因子，默认0.75\n- modCount: 结构修改计数器，用于快速失败机制',
		},
		{
			title: '2. 哈希算法与索引计算',
			content: 'HashMap 通过哈希算法确定键值对的存储位置。具体过程如下：',
		},
		{
			content:
				'1) 首先调用键对象的 hashCode() 方法获取哈希值\n2) 通过扰动函数对哈希值进行二次哈希，以减少碰撞\n3) 使用 (n-1) & hash 计算索引位置，其中n是数组长度\n\n在 JDK1.8 中，哈希扰动函数简化为：只进行一次异或和位移操作，提高了效率。',
			code: `// JDK1.8 哈希计算方法
  static final int hash(Object key) {
	  int h;
	  return (key == null) ? 0 : (h = key.hashCode()) ^ (h >>> 16);
  }`,
		},
		{
			title: '3. 解决哈希冲突',
			content: '当不同键计算出相同的索引位置时，HashMap 采用以下方式解决冲突：',
		},
		{
			content:
				'- JDK1.7及以前：使用链表解决冲突\n- JDK1.8及以后：当链表长度超过8时转换为红黑树，小于6时退化为链表\n\n这种改进显著提高了在哈希冲突严重时的查询效率，从O(n)提升到O(log n)。',
		},
		{
			title: '4. 扩容机制',
			content: 'HashMap 的扩容是其重要特性，主要过程包括：',
		},
		{
			content:
				'1) 当 size > threshold 时触发扩容\n2) 创建新的数组，大小为原数组的2倍\n3) 重新计算所有元素的位置并迁移\n4) JDK1.8优化：扩容时不需要重新计算哈希，只需判断高位是0还是1\n\n扩容是一个非常耗时的操作，因此初始化时设置合理的初始容量很重要。',
			code: `// 扩容代码片段
  final Node<K,V>[] resize() {
	  Node<K,V>[] oldTab = table;
	  int oldCap = (oldTab == null) ? 0 : oldTab.length;
	  int oldThr = threshold;
	  int newCap, newThr = 0;
	  if (oldCap > 0) {
		  if (oldCap >= MAXIMUM_CAPACITY) {
			  threshold = Integer.MAX_VALUE;
			  return oldTab;
		  }
		  else if ((newCap = oldCap << 1) < MAXIMUM_CAPACITY &&
				   oldCap >= DEFAULT_INITIAL_CAPACITY)
			  newThr = oldThr << 1; // double threshold
	  }
	  // ... 其他逻辑
  }`,
		},
		{
			title: '5. 线程安全性',
			content: 'HashMap 不是线程安全的，在多线程环境下可能出现问题：',
		},
		{
			content:
				'- 多线程put可能导致数据丢失\n- JDK1.7中多线程扩容可能导致环形链表，引起死循环\n- 并发修改可能触发快速失败机制\n\n如果需要线程安全的Map，可以使用：\n1) Collections.synchronizedMap\n2) ConcurrentHashMap(推荐)',
		},
		{
			title: '6. 性能优化建议',
			content: '使用HashMap时可以考虑以下优化：',
		},
		{
			content:
				'1) 设置合理的初始容量，避免频繁扩容\n2) 使用不可变对象作为键，确保hashCode()稳定\n3) 重写equals()时必须重写hashCode()\n4) 对于已知大小的Map，可以使用Guava的ImmutableMap\n5) 考虑使用LinkedHashMap如果需要保持插入顺序',
		},
	],
	comments: [
		{
			username: 'Java爱好者',
			avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
			content: '讲得非常详细，特别是红黑树的部分，解决了我一直以来的困惑！',
			time: '2025-04-01 10:30',
			likes: 15,
			isAuthor: false,
		},
		{
			username: '架构师老王',
			avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
			content: '关于扩容机制的解释很清晰，建议补充一下JDK7和JDK8在扩容时的具体区别。',
			time: '2025-04-02 14:45',
			likes: 8,
			isAuthor: true,
		},
	],
});
const showComments = ref(false);
const newComment = ref('');

const toggleComments = () => {
	showComments.value = !showComments.value;
};

const submitComment = () => {
	if (!newComment.value.trim()) return;

	state.comments.unshift({
		username: '当前用户',
		avatar: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
		content: newComment.value.trim(),
		time: '刚刚',
		likes: 0,
		isAuthor: false,
	});

	newComment.value = '';
	ElMessage.success('评论发布成功');
};

const likeComment = (index: number) => {
	state.comments[index].likes++;
	ElMessage.success('点赞成功');
};

const replyToComment = (index: number) => {
	const username = state.comments[index].username;
	newComment.value = `@${username} `;
	ElMessage.info(`正在回复 ${username}`);
};

const handleCollect = () => {
	ElMessage.success('收藏成功');
};

const handleShare = () => {
	ElMessage.success('已生成分享链接');
};

const copyAnswer = () => {
	const text = state.answerContent.map((section) => `${section.title || ''}\n${section.content || ''}\n${section.code || ''}`).join('\n\n');
	navigator.clipboard.writeText(text);
	ElMessage.success('答案已复制到剪贴板');
};
</script>

<style scoped lang="scss">
.home-container {
	max-width: 1200px;
	margin: 20px auto;
	padding: 20px;
}

.title-section {
	display: flex;
	align-items: flex-start;
	margin-bottom: 30px;
	padding: 20px;
	background: linear-gradient(135deg, #f5f7fa 0%, #e4e8eb 100%);
	border-radius: 12px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

	.title-icon {
		margin-right: 24px;
		flex-shrink: 0;

		.icon {
			filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
		}
	}

	.title-content {
		flex: 1;

		h1 {
			font-size: 28px;
			font-weight: 600;
			color: #2c3e50;
			margin: 0 0 12px 0;
			line-height: 1.3;
		}

		.description {
			font-size: 16px;
			color: #5a6a7f;
			margin-bottom: 16px;
			line-height: 1.6;
		}

		.meta-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20px;

			.tags {
				.el-tag {
					margin-right: 8px;
					font-weight: 500;
				}
			}

			.stats {
				display: flex;
				color: #7f8c9a;
				font-size: 14px;

				.stat-item {
					display: flex;
					align-items: center;
					margin-left: 16px;

					.el-icon {
						margin-right: 4px;
						font-size: 16px;
					}
				}
			}
		}

		.actions {
			.el-button {
				margin-right: 12px;
				padding: 10px 20px;

				.el-icon {
					margin-right: 6px;
				}
			}
		}
	}
}

.answer-section {
	.answer-header {
		display: flex;
		justify-content: space-between;
		align-items: center;

		h2 {
			margin: 0;
			font-size: 22px;
			color: #2c3e50;
		}
	}

	.answer-content {
		.answer-section-item {
			margin-bottom: 24px;

			h3 {
				font-size: 18px;
				color: #34495e;
				margin: 24px 0 12px 0;
				padding-bottom: 6px;
				border-bottom: 1px solid #eee;
			}

			p {
				font-size: 15px;
				line-height: 1.8;
				color: #3a4a5d;
				margin: 0 0 12px 0;
				white-space: pre-line;
			}

			.code-block {
				background-color: #f6f8fa;
				border-radius: 6px;
				padding: 16px;
				margin: 12px 0;
				overflow-x: auto;

				pre {
					margin: 0;
					font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
					font-size: 14px;
					line-height: 1.5;
					color: #24292e;
				}
			}
		}
	}
}

@media (max-width: 768px) {
	.title-section {
		flex-direction: column;
		padding: 16px;

		.title-icon {
			margin-right: 0;
			margin-bottom: 16px;
			align-self: center;
		}
	}

	.meta-info {
		flex-direction: column;
		align-items: flex-start !important;

		.stats {
			margin-top: 12px;
		}
	}

	.actions {
		.el-button {
			margin-bottom: 8px;
		}
	}
}
.comments-section {
	margin-top: 40px;
	padding: 0 10px;

	.toggle-comments-btn {
		display: block;
		margin: 0 auto 20px;
		padding: 12px 24px;
		font-size: 16px;

		.el-icon {
			margin-right: 6px;
		}
	}

	.comments-container {
		margin-top: 20px;
		border-top: 1px solid #eee;
		padding-top: 20px;

		.comment-form {
			margin-bottom: 30px;

			h3 {
				margin-top: 0;
				margin-bottom: 15px;
				font-size: 18px;
				color: #333;
			}

			.form-actions {
				margin-top: 15px;
				text-align: right;
			}
		}

		.comment-list {
			h3 {
				font-size: 18px;
				color: #333;
				margin-bottom: 20px;
				padding-bottom: 10px;
				border-bottom: 1px solid #eee;
			}

			.empty-comments {
				margin: 40px 0;
			}

			.comment-item {
				margin-bottom: 20px;

				.comment-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 12px;

					.user-info {
						display: flex;
						align-items: center;

						.user-meta {
							margin-left: 10px;
							display: flex;
							flex-direction: column;

							.username {
								font-weight: 500;
								font-size: 15px;
							}

							.time {
								font-size: 12px;
								color: #999;
								margin-top: 2px;
							}
						}
					}
				}

				.comment-content {
					font-size: 15px;
					line-height: 1.6;
					color: #333;
					margin-bottom: 12px;
					white-space: pre-line;
				}

				.comment-actions {
					text-align: right;

					.el-button {
						padding: 0 8px;
						font-size: 13px;
					}
				}
			}
		}
	}
}

@media (max-width: 768px) {
	.comments-section {
		.comments-container {
			padding: 15px 0;

			.comment-form {
				padding: 15px;
			}

			.comment-item {
				padding: 15px;
			}
		}
	}
}
</style>
